/*
 * @Author: xiehangyun 
 * @Date: 2025-02-22 09:36:55 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-22 10:12:18
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./brushColor.module.less";
import graffitiStore from "../../graffitiStore";
import { Tooltip } from "antd";
import { SketchPicker } from "react-color";
import ColorPick from "@/editorComponent/RightMenu/ColorPick/ColorPick";

interface Iprops {
  children?: ReactNode
}

// 画笔颜色
export default function BrushColor(props: Iprops) {

  const showTop = useRef(false);
  const dom = useRef<HTMLDivElement | null>(null);
  const [brushColor, setBrushColor] = useState(graffitiStore.brushColor);

  useEffect(() => {
  }, []);

  useEffect(() => autorun(() => {
    setBrushColor(graffitiStore.brushColor);
  }, { delay: 30 }), []);

  return (
    <div ref={dom} className={styles.brushColor} >
      <Tooltip
        title={
          <div className={styles.color_picker} >
            <SketchPicker
              className={styles.SketchPicker}
              color={brushColor}
              onChange={(color: any) => {
                graffitiStore.setBrushColor(color.hex as `#${string}`);
              }}

            />
            <ColorPick />
          </div>
        }
        onOpenChange={open => {
          showTop.current = open;
        }}
        trigger={['click']}
        color={"#00000000"}
        placement="bottom"
      >
        <span
          className={styles.colorBlock}
          style={{ backgroundColor: brushColor }}
        ></span>
      </Tooltip>
    </div>
  );
}